<!-- 声明文档类型为 HTML5 -->
<!DOCTYPE html>
<!-- 定义 HTML 文档，语言设置为简体中文 -->
<html lang="zh-CN">

<!-- 定义文档的头部，包含文档元数据 -->

<head>
    <!-- 设置文档的字符编码为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置页面在移动设备上的视图缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置页面的标题 -->
    <title>[ 月华 ]的[ 简单知识 ]页面的[ 空闲待机 动画]</title>
    <!-- 引入外部 CSS 样式文件 -->
    <style>
        @import url('./css/bubblePageStyle.css');
    </style>
</head>

<!-- 定义文档的主体内容 -->

<body>
    <!-- 页面容器 -->
    <div class="container">
        <!-- 气泡容器 -->
        <div class="bubbles-container" id="bubblesContainer"></div>
    </div>
    <!-- 操作按钮容器 -->
    <div class="controls">
        <!-- 添加气泡按钮 -->
        <button class="control-btn" id="addBubbleBtn">添加气泡</button>
        <!-- 清除气泡按钮 -->
        <button class="control-btn" id="clearBubblesBtn">清除气泡</button>
    </div>

    <!-- 引入外部 JavaScript 脚本文件 -->
    <script src="./js/bubblePageScript.js"></script>
</body>

<!-- HTML 文档结束 -->

</html>